<template>
    <el-timeline>
        <el-timeline-item
        v-for="blog in blogs"
        :key="blog.id"
        :color="blog.color"
        :size="blog.size"
        :timestamp="blog.timestamp"
        >
        <span class="title" @click="toDetail(blog)">{{blog.title}}</span>
        <span>{{blog.description}}</span>
        </el-timeline-item>
    </el-timeline>
</template>

<script>
import { reactive } from '@vue/reactivity'
import { onBeforeMount } from '@vue/runtime-core'
import axios from 'axios'
import router from '@/router'

export default {
    name: 'TimelineUnit',
    setup() {
        let blogs = reactive([])
        
        onBeforeMount(() => {
        axios.get('http://localhost/api/getBlog').then(res => {
            //不能直接赋值，失去响应式
            for(let i = 0; i < res.data.length; i++) {
                let blog = res.data[i]
                if(blog.type == '锚点') {
                    blog.size = 'large',
                    blog.color = 'blue'
                }
                blogs.unshift(blog)
            }
            //console.log(blogs)
        }).catch(err => {
            console.log('未知错误！')
            console.log(err)
        })
        })
        const toDetail = (blog) => {
            router.push(`/blog/${blog.id}`)
        }

        return {
            blogs,
            toDetail
        }
    }
}
</script>

<style scoped>
    .el-timeline {
        cursor: default;
    }
    span {
        padding-right: 20px;
    }
    .title:hover {
        color: skyblue;
    }
</style>